/** * @Auther lyh Fun 忘记密码 * @data 2020/07/07 */
<template>
  <Form
    ref="loginForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
  >
    <FormItem prop="userPhone">
      <Input
        style="width:70%"
        clearable
        v-model="form.userPhone"
        placeholder="请输入手机号"
        @on-change="onchange('loginForm')"
      />
      <Button
        class="buttoncode"
        :size="buttonSize"
        :disabled="isbld"
        v-show="showtime"
        style="width:30%"
        @click="sendCode"
        >获取验证码</Button
      >
      <Button
        class="buttoncode"
        :size="buttonSize"
        style="width:30%"
        disabled
        v-show="!showtime"
        type="default"
        >{{ count }}s后重新获取</Button
      >
      <span v-show="codeShow"
        ><Icon type="ios-alert-outline" />验证码已发送，十分钟内有效</span
      >
    </FormItem>
    <!-- <FormItem>
      <Silder
        :controls="control"
        :successFun="successFun"
        :userPhone="form.userPhone"
        @smsRecordId="smsRecordId"
      ></Silder>
    </FormItem> -->
    <FormItem prop="smsCode">
      <Input clearable v-model="form.smsCode" placeholder="请输入验证码" />
    </FormItem>

    <FormItem prop="newPwd">
      <Input
        password
        type="password"
        v-model="form.newPwd"
        placeholder="请输入新密码（6-15位字母和数字，区分大小写）"
      />
    </FormItem>
    <FormItem prop="affirmPwd">
      <Input
        password
        type="password"
        v-model="form.affirmPwd"
        placeholder="请再次输入新密码"
      />
    </FormItem>
    <FormItem id="fromDiv1">
      <span> <router-link to="/login"> 去登录></router-link></span>
    </FormItem>
    <div
      @click="handleSubmit"
      type="primary"
      class="queren"
      long
    >
      确认
    </div>
  </Form>
</template>
<script>
import Silder from "@/view/login/components/SilderLogin";
import tool from "@/libs/jss/FormValidation";
export default {
  name: "PhoneRecovery",
  components: {
    Silder
  },
  data() {
    const affirmPwd1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("二次密码不能为空"));
      } else {
        if (value != this.form.newPwd) {
          callback(new Error("新密码不一致，请重新输入"));
        } else {
          return callback();
        }
      }
    };
    return {
      buttonSize: "large",
      showtime: true,
      count: "",
      codeShow: false,
      timer: null,
      isbld: false,
      debld: false,
      form: {
        userPhone: "",
        newPwd: "",
        smsCode: "",
        affirmPwd: "",
        recordId: ""
      },
      rules: {
        userPhone: [
          {
            required: true,
            validator: tool.FormValidate.Form().phone,
            trigger: "blur"
          }
        ],
        smsCode: [
          { required: true, message: "验证码不能为空", trigger: "blur" }
        ],
        newPwd: [
          {
            required: true,
            trigger: "blur",
            validator: tool.FormValidate.Form().password
          }
        ],
        affirmPwd: [{ required: true, trigger: "blur", validator: affirmPwd1 }]
      },
      control: false
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // this.APIS.smsChangepwd(this.form).then(res => {
          this.APIS.findPwd(this.form).then(res => {
            if (res.code == 20000) {
              this.$Message.success("修改成功!");
              this.$router.push({ name: "login" });
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    sendCode() {
      let datas = { userPhone: this.form.userPhone };
      if (datas.userPhone) {
        var regPhone = /^1[3456789]\d{9}$/;
        if (regPhone.test(datas.userPhone)) {
           this.isbld = true;
          this.APIS.sendCode(datas)
            .then(res => {
              if (res.code === 20000) {
                this.form.recordId = res.data.smsRecordId;
                this.codeShow = true;
                const TIME_COUNT = 90;
                if (!this.timer) {
                  this.count = TIME_COUNT;
                  this.showtime = false;
                  this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                      this.count--;
                    } else {
                      this.showtime = true;
                      this.isbld = false;
                      this.codeShow = false;
                      clearInterval(this.timer);
                      this.timer = null;
                    }
                  }, 1000);
                }
              } else {
              }
            })
            .catch(err => {});
        } else {
          this.$Message.warning("手机号格式不正确");
        }
      } else {
        this.$Message.warning("输入手机号");
      }
    },
    successFun() {
      this.$Message.success("验证码发送成功!");
    },
    // smsRecordId (val) {
    //   this.form.smsRecordId = val
    // },
    onchange(formCustom) {
      this.$refs[formCustom].validateField("userPhone", valid => {
        if (!valid) {
          // 表单验证通过
          this.control = true;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style.less"; /*引入公共样式*/
.buttoncode {
  height: 40px;
  // border-left:0 solid rgba(200,200,200,0.25)
}
</style>
